Tengo un código ajax que parece funcionar bien para la mayoría de los lugares en los que lo he usado hasta ahora, sin embargo, al intentar usarlo para actualizar los detalles del usuario en mi página, parece perder el símbolo "+" si se usa en una dirección de correo electrónico (como test+test@test.com aparece como test test@test.com en mi archivo PHP.
function prefUpdate() { let ytTog = document.getElementById("togBtn").checked; let unameNew = document.getElementById("uname").value; let usnameNew = document.getElementById("usname").value; let emailNew = document.getElementById("email").value; let params = "ytTog="+ytTog+"&unameNew="+unameNew+"&usnameNew="+usnameNew+"&emailNew="+emailNew; let xhr = new XMLHttpRequest(); xhr.open('POST', 'pref_update.php', true); xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded') xhr.onreadystatechange = function() { if(xhr.readyState == 4 && xhr.status == 200) { let return_data = xhr.responseText; if(return_data) { <do stuff> } } } xhr.send(params); }Así que aquí tomo un botón, nombre y menos junto con la dirección de correo electrónico y lo paso a un archivo php que devuelve algunos datos con los que puedo hacer cosas.
Siento que podría ser la 'application/x-www-form-urlencoded' que lo está causando, pero buscar en Google no me ha dado mucha forma de resolverlo.
[editar] solo para decir que probé multipart/form-data en lugar de application/x-www-form-urlencoded pero esto simplemente rompió las cosas por completo.
Estás bien. Para Content-Type: application/x-www-form-urlencoded todos los signos '+' significan ' ' (espacio). Por lo tanto, debe codificarse mediante la función encodeURIComponent() .
let params = Object.entries({ ytTog, unameNew, usnameNew, emailNew }) .map(pair => pair.map(encodeURIComponent).join('=')) .join('&');Formulario MDN :
Para application/x-www-form-urlencoded, los espacios deben reemplazarse por +, por lo que es posible que desee seguir un reemplazo de encodeURIComponent() con un reemplazo adicional de %20 con +.
Debe codificar sus datos correctamente al realizar una llamada ajax.
Puede usar un objeto URLSearchParams para hacer esto por usted.
let params = new URLSearchParams({ytTog, unameNew, usnameNew, emailNew}); ... xhr.send(params);